<div class="layuimini-main">
    <div class="layui-card">
        <div class="layui-card-header">家庭通讯录</div>
        <div class="layui-card-body">
            <div class="layui-collapse">
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'axios', 'element'], function () {
        var form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            element = layui.element,
            $ = layui.$;

        function initAddressBook(data) {
            data.forEach(function (item, index) {
                let colla = `<div class="layui-colla-item">
                                    <h2 class="layui-colla-title">${item.name}</h2>
                                    <div class="layui-colla-content">
                                        <p>手机号码：${item.phone}</p>
                                        <p>电子邮箱：${item.email}</p>
                                    </div>
                                 </div>`;
                let collaObj = $(colla);

                $('.layui-collapse').append(collaObj);
            })

        }

        axios({
            method: "get",
            url: "family/addressBook"
        }).then(response => {
            if (response.code == 0){
                initAddressBook(response.data);
                element.render('collapse');
            }else {
                layer.msg(response.msg);
            }

        }).catch(error => {
            layer.msg(error);
        })
    });
</script>